<template>
  <div>
    <el-form :model="tableHead">
      <el-row>
        <el-col :span="1" class="ele-col-item">规格名:</el-col>
        <el-col
          :span="4"
        ><el-input
          v-model="tableHead.name"
          :disabled="type===3?true:false"
          clearable
          @change="changeItemValue"
        /></el-col>
        <el-col :span="1" class="text ele-col-item">类型</el-col>
        <el-col :span="5">
          <el-select v-model="tableHead.type" :disabled="type===3?true:false">
            <el-option value="1" label="商品" />
            <el-option value="2" label="服务" />
          </el-select>
        </el-col>
        <el-col :span="5">
          <span>是否必选：</span>
          <el-radio-group v-model="tableHead.isRequired" :disabled="type===3?true:false">
            <el-radio label="1">是</el-radio>
            <el-radio label="0">否</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="5">
          <span>是否多选：</span>
          <el-radio-group v-model="tableHead.multiSelFlg" :disabled="type===3?true:false">
            <el-radio label="1">多选</el-radio>
            <el-radio label="0">单选</el-radio>
          </el-radio-group>
        </el-col>
        <el-col :span="1">
          <el-button v-show="type!==3" type="danger" size="mini" icon="el-icon-close" circle @click="deleteItem" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1" class="text ele-col-item">描述:</el-col>
        <el-col :span="10">
          <el-input v-model="tableHead.description" :disabled="type===3?true:false" placeholder="可输入规格描述" />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="1" class="ele-col-item">规格值:</el-col>
        <el-col :span="18">
          <el-col v-for="(item, index) in tableHead.values" :key="index" :span="4">
            <SpecValue ref="SpecValue" :table-col="item" :index="index" :type="type" @changeItemValue="changeItemValue" @delete="deleteSpecValue" />
          </el-col>
        </el-col>
        <el-col
          :span="5"
        >
          <el-col :span="12">
            <el-button v-show="type!==3" type="text" @click="addSpecValue">添加规格值</el-button>
          </el-col>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
import SpecValue from '../ExtraSpecValue/index'
export default {
  name: 'ExtraSpecItem',
  components: { SpecValue },
  props: {
    index: {
      type: Number,
      required: true
    },
    type: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      tableHead: {
        name: '',
        description: '',
        goodsType: '',
        isRequired: '',
        multiSelFlg: '',
        values: [{
          val: null
        }, {
          val: null
        }]
      }
    }
  },
  methods: {
    addSpecValue() {
      const vm = this
      vm.tableHead.values.push({
        val: null
      })
      vm.$emit('createExtraTable')
    },
    getData() {
      const vm = this
      return vm.tableHead
    },
    changeItemValue() {
      const vm = this
      vm.$emit('createExtraTable')
    },
    deleteItem() {
      const vm = this
      vm.$emit('delete', vm.index)
      vm.$emit('createExtraTable')
    },
    deleteSpecValue(index) {
      const vm = this
      vm.tableHead.values.splice(index, 1)
      vm.$emit('createExtraTable')
    }
  }
}
</script>

<style scoped>
</style>
